<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>right</title>
</head>
<style>
    :root {
        --popcolor: pink;
        --color: #fff;
        --triangle: 8px;
        --distance: -12px;
    }

    .chat {
        width: 100px;
        background-color: var(--popcolor);
        color: var(--color);
        text-align: center;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        margin: 200px auto;
    }
    .pop{
        position: relative;
    }
    .pop::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: var(--triangle) var(--triangle) var(--triangle) 0;
        border-color: transparent black transparent  transparent;
        left: calc(50% - var(--triangle));
        top: 20px;
        left: 130px;
        transform: translateX(0%) translateY(var(--distance));
    }
    .pop::after{
        color: var(--color);
        font-size: 14px;
        background-color: black;
        content: attr(aria-controls);
        position: absolute;
        top: -70%;
        left: 160%;
        transform: translateX(-50%) translateY(var(--distance));
        border-radius: 2px;
        line-height: 1.5;
        padding: 2px 4px;
        white-space: wrap;
        width: 100px;
    }
    .pop::before,
    .pop::after{
        visibility: hidden;
    }
    .pop:hover::before,
    .pop:hover::after{
        visibility: visible;
    }
</style>

<body>
    <div class="pop chat" aria-controls="弹出气泡哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或弹出气泡弹出气泡弹出气泡弹出气泡弹出气泡弹出气泡">气泡提示</div>
</body>

</html>